<template>
  <div class="container">
    <div v-if="fetchList.length === 0" class="null">暂无新订单。</div>
    <div v-if="fetchList.length !== 0" class="toolbarr">
      <el-button style="margin-right: 1vw" type="primary" @click="batchCreate()">生成配送单</el-button>
      <el-alert :closable="false" center title="点击确认订单后，订单将不可被撤销" type="success"/>
    </div>

    <div v-if="fetchList.length !== 0" class="list-container">
      <el-table
        ref="table"
        :stripe="true"
        :data="fetchList"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="商品信息 品名/货号/规格" min-width="250">
          <template slot-scope="scope">
            <span
              :title="scope.row['品名']+'/'+scope.row['货号']"
            >{{ scope.row['品名'] }}/{{ scope.row['货号'] }}/{{ scope.row['包装规格'] }}</span>
          </template>
        </el-table-column>

        <el-table-column label="订单信息" min-width="150">
          <div slot-scope="scope" class="font12">
            <el-tooltip placement="top">
              <div slot="content">
                请购人联系方式
                <br>
                收货人电话：{{ scope.row['收货人电话'] }}
                <br>
                <span>收货地址：{{ scope.row['收货人地址'] }}</span>
                <span v-if="scope.row['是否集中验货'] === 'True'" style="color: red">收货方式： 集中验货</span>
              </div>
              <div>
                <span class="ohang1 pingming">{{ scope.row['课题组名称'] }}-{{ scope.row['请购人姓名'] }}</span>
                <br>
                <span>{{ scope.row['订单日期'] }}</span>
              </div>
            </el-tooltip>
          </div>
        </el-table-column>

        <el-table-column label="收货地址" min-width="150">
          <div slot-scope="scope" class="font12">
            <div class="img-info-text">
              <span
                v-if="scope.row['是否集中验货'] !== 'True'"
              >{{ scope.row['收货人姓名']+'-'+scope.row['收货人地址'] }}</span>
              <span
                v-if="scope.row['是否集中验货'] === 'True'"
                style="color: red"
              >集中验货/{{ scope.row['收货人地址'] }}</span>
              <span>{{ scope.row['订单号'] }}</span>
            </div>
          </div>
        </el-table-column>

        <el-table-column label="价格信息(元)" min-width="150">
          <div slot-scope="scope" class="font12">
            <span>{{ scope.row['成交价'] }}*{{ scope.row['数量'] }}={{ (parseFloat(scope.row['成交价'])*parseFloat(scope.row['数量'])).toFixed(2) }}</span>
            <el-tooltip class="item" effect="dark" content="填写与采购者协商后的价格" placement="bottom-start">
              <i class="el-icon-edit" @click="openDialog(scope.row)"/>
            </el-tooltip>
          </div>
        </el-table-column>
        <el-table-column label="课题卡号" min-width="130">
          <template slot-scope="scope">
            <span v-if="scope.row['课题卡号']">{{ scope.row['课题卡号'] }}</span>
            <span v-if="!scope.row['课题卡号']">无</span>
          </template>
        </el-table-column>
        <el-table-column label="采购要求" min-width="130">
          <template slot-scope="scope">
            <span v-if="scope.row['采购要求']" style="color:red">{{ scope.row['采购要求'] }}</span>
            <span v-if="!scope.row['采购要求']">无</span>
          </template>
        </el-table-column>
        <el-table-column label="供货商订单" min-width="130">
          <div slot-scope="scope" class="font12">
            <span v-if="!scope.row['供货商订单号']">无</span>
            <span v-if="scope.row['供货商订单号']">{{ scope.row['供货商订单号'] }}</span>
            <el-tooltip class="item" effect="dark" content="填写供货商订单" placement="bottom-start">
              <i class="el-icon-edit" @click="openOrderDialog(scope.row)"/>
            </el-tooltip>
          </div>
        </el-table-column>
        <el-table-column label="预计交货日期" min-width="200">
          <template slot-scope="scope">
            <div class="block">
              <el-date-picker
                v-model="scope.row.预计交货日期"
                :picker-options="pickerOptions"
                style="width: 150px"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择交货日期"
                @change="timeChanged(scope.row)"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="100">
          <div slot-scope="scope" class="font12">
            <div class="img-info-text">
              <el-button
                v-if="scope.row['订单状态']==='待确认'&&scope.row['数量'] !== '1'"
                style="margin-right: 20px"
                type="text"
                @click="split(scope.row)"
              >订单拆分</el-button>
              <el-tooltip
                v-if="scope.row['订单状态']==='待确认'&&scope.row['数量'] === '1'"
                class="item"
                effect="dark"
                content="订单数量为1不可拆分"
                placement="bottom-start"
              >
                <el-button disabled style="margin-right: 20px" type="text">订单拆分</el-button>
              </el-tooltip>
              <el-button
                v-if="scope.row['订单状态']==='待确认'"
                style="margin-right: 20px"
                type="text"
                @click="confirm(scope.row)"
              >确认订单</el-button>
              <el-button
                v-if="scope.row['订单状态']!=='待确认'"
                disabled
                style="margin-right: 20px"
                type="text"
                @click="pass(key)"
              >订单已确认</el-button>
            </div>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination :total="fetchList.length" style="margin-left: 1vw" layout="total"/>
    </div>
    <el-dialog :visible.sync="orderDialog" title="请输入供货商订单号" width="30%">
      <el-input v-model="input_order" autofocus placeholder="请输入供货商订单号"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orderDialog = false">取 消</el-button>
        <el-button type="primary" @click="orderConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="showSplitModel" title="拆分订单" width="50%">
      <div>
        <span>订单1</span>
        <el-input-number
          v-model="orderNum1"
          :min="1"
          :max="currentSplitItem['数量']-1"
          size="medium"
          @change="handlerChange1"
        />
        <span style="margin-left: 20px">订单2</span>
        <el-input-number
          v-model="orderNum2"
          :min="1"
          :max="currentSplitItem['数量']-1"
          size="medium"
          @change="handlerChange2"
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showSplitModel = false">取 消</el-button>
        <el-button type="primary" @click="splitConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible" title="请输入协商后的单价" width="30%">
      <el-input v-model="input_price" autofocus placeholder="请输入价格"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmPrice">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/api'
import store from '@/store'

export default {
  name: 'ShopCar',
  data() {
    return {
      showSplitModel: false,
      orderNum1: 1,
      orderNum2: 1,
      input_price: '',
      dialogVisible: false,
      total: 0,
      multipleSelection: [],
      listLoading: true,
      input_order: '',
      orderDialog: false,
      currentEditSysid: '',
      currentSplitItem: {},
      pickerOptions: {
        disabledDate(time) {
          const now = new Date()
          now.setDate(now.getDate() - 1)
          return time.getTime() < now
        }
      }
    }
  },
  computed: {
    fetchList() {
      console.log(store.getters.newList)
      return store.getters.newList
    }
  },
  created() {
    this.getList()
  },
  methods: {
    splitConfirm() {
      const param = {
        query: 'vue_供货商订单拆分', sysid: this.currentSplitItem.sysid, ordernum: this.orderNum1
      }
      fetchList(param).then(({ data }) => {
        this.showSplitModel = false
        this.getList()
      })
    },
    handlerChange1() {
      this.orderNum2 = this.currentSplitItem['数量'] - this.orderNum1
    },
    handlerChange2() {
      this.orderNum1 = this.currentSplitItem['数量'] - this.orderNum2
    },
    split(item) {
      this.currentSplitItem = item
      this.showSplitModel = true
      this.orderNum2 = this.currentSplitItem['数量'] - this.orderNum1
    },
    confirmPrice: function() {
      if (this.input_price === '') {
        this.$message({ message: '修改价格不得为空' })
        return
      }
      const param = {
        query: 'vue_购物车修改',
        sysid: this.currentEditSysid,
        商品价格: this.input_price
      }
      fetchList(param).then(({ data }) => {
        console.log(data)
        if (data.flag === '0') {
          this.$message({ message: data.message, type: 'error' })
        } else {
          this.$message({ message: '修改价格成功', type: 'success' })
          this.getList()
        }
      })
      this.dialogVisible = false
    },
    openDialog(item) {
      this.dialogVisible = true
      this.currentEditSysid = item['sysid']
      this.input_price = item['成交价']
    },
    timeChanged(item) {
      console.log(item)
      const param = { query: 'vue_供货商订单修改', sysid: item.sysid, 预计交货日期: item.预计交货日期 }
      fetchList(param).then(({ data }) => {
        if (data.flag === '1') {
          this.$message({ message: '修改成功 ', type: 'success' })
          this.getList()
          this.orderDialog = false
        }
        console.log(data)
      })
    },
    openOrderDialog(item) {
      this.orderDialog = true
      this.currentEditSysid = item['sysid']
      this.input_order = item['供货商订单号']
    },
    orderConfirm() {
      if (!this.input_order) {
        this.$message({ message: '请输入供货商订单号', type: 'warning' })
        return
      }
      const param = { query: 'vue_供货商订单修改', sysid: this.currentEditSysid, 供货商订单号: this.input_order }
      fetchList(param).then(({ data }) => {
        if (data.flag === '1') {
          this.$message({ message: '修改成功 ', type: 'success' })
          this.getList()
          this.orderDialog = false
        }
        console.log(data)
      })
    },
    confirm(item) {
      const param = {
        query: 'nbjk供货商确认',
        username: localStorage.ghusername,
        sysid: item.sysid
      }
      fetchList(param).then(({ data }) => {
        if (data.flag === '1') {
          this.getList()
        }
      })
    },
    create(id) {
      const param = {
        query: 'nbjk配送单生成',
        username: localStorage.ghusername,
        选中id: id
      }

      fetchList(param).then(({ data }) => {
        if (data.flag === '0') {
          this.$message({ message: data.message, type: 'error' })
        } else {
          this.$message({ message: '生成配送单成功，在未到货订单中可以打印配送单', type: 'success' })
          this.getList()
        }
      })
    },
    batchCreate() {
      let id = ''
      this.multipleSelection.forEach((item) => {
        id += item.sysid + ','
      })
      if (id === '') {
        this.$message({ message: '请选择生成配送单订单明细', type: 'warning' })
        return
      }
      this.create(id)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    getList() {
      this.listLoading = true
      this.$store.dispatch('refreshNew', localStorage.ghusername).then(() => {
        this.listLoading = false
      })
      this.$store.dispatch('refreshWeidaohuo', localStorage.ghusername).then(() => { })
      this.$store.dispatch('refreshYidaohuo', localStorage.ghusername).then(() => { })
    },
    toDetail(item) {
      console.log(item.sysid)
    }
  }
}

</script>

<style scoped>
.toolbarr {
  margin-top: 5px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.font12 {
}
.list-container {
  margin-bottom: 55px;
  box-shadow: 0 0 15px #d0d2e3;
  margin-top: 1vh;
  width: 100%;
  color: white;
}

.container {
  height: 100%;
  width: 100%;
}

.pagination {
  justify-content: space-between;
  z-index: 1000;
  background: white;
  bottom: 0;
  height: 50px;
  position: fixed;
  align-items: center;
  margin-top: 1vh;
  flex-direction: row;
  display: flex;
  box-shadow: 0 0 30px #d0d0e3;
  border-radius: 2px;
  margin-right: 1vw;
}

.img-infor {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}

.img-info-text {
  align-items: flex-start;
  justify-content: space-between;
  height: 50px;
  display: flex;
  flex-direction: column;
}
.list-container .el-button + .el-button {
  margin-left: 0px;
}

.ohang1 {
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis;
}
.pingming {
  color: #409eff;
  cursor: pointer;
}
</style>
